<script>
import {detailResource} from "../../api/resource";
import {getView} from "../../utils/webutil";
import {getFileServer} from "../../api/file";
import UserCard from "../../components/user/UserCard.vue";
import CommentList from "../../components/comment/CommentList.vue";
import {userDetail} from "../../api/user";
import FeiyuCalendar from "../../components/tool/FeiyuCalendar.vue";

export default {
    name: "ResourceDetail",
    components: {FeiyuCalendar, CommentList, UserCard},
    data() {
        return {
            resource: {},
            url: null,
            owner:{},
            commentFlag:false,
        }
    },
    methods: {
        getUrl(type) {
            if (type)
                return getView(type)
        },

        init() {
            const id = this.$route.params['id']
            detailResource(id)
                .then(res => {
                    if (res.code === 200) {
                        this.resource = res.data
                        this.getOwner(this.resource.ownerId)
                        this.resource.tag = JSON.parse(this.resource.tag)
                        this.getDownloadUrl(this.resource.id)
                    }

                })
        },
        getDownloadUrl(id) {
            getFileServer()
                .then(res => {
                    if (res.code === 200)
                        this.url = res.data.concat(id)
                })
        },
        getOwner(id){
            userDetail(id)
            .then(res=>{
                this.owner=res.data
            })

        }
    },
    mounted() {
        this.init()
    }
}
</script>

<template>
    <div class="flex row center flex-start detailMain">

        <div class="flex column detail-left">
            <div class="flex column">
                <h3>资源详细</h3>
                <el-divider style="margin: 0"/>
            </div>
            <!--            左边上面资源信息-->
            <div class="flex row space-between">
                <!--               资源信息左边 -->
                <div class="flex column space-between" style="height: 250px">
                    <div class="flex column center">
                        <h2>{{ resource.title }}</h2>
                        <div class="flex row">
                            <el-tag size="small" type="success" effect="plain" v-for="e in resource.tag" :key="e">
                                {{ e }}
                            </el-tag>
                        </div>
                    </div>
                    <span>{{ resource.summary }}</span>
                    <div class="flex row align-center space-between" style="width: 500px">
                        <span style="cursor:pointer"><i class="iconfont icon-star-s" style="color: #f4ea2a"/>{{ resource.score }}</span>
                        <el-divider direction="vertical"/>
                        <span><i class="iconfont icon-download"/>{{ resource.downloadCount }}</span>
                        <el-divider direction="vertical"/>
                        <span><i class="iconfont icon-file-type"/>{{ resource.fileType }}</span>
                        <el-divider direction="vertical"/>
                        <span><i class="iconfont icon-file-size"/>{{ Math.ceil(resource.size / 1024) }}KB</span>
                        <el-divider direction="vertical"/>
                        <span><i class="iconfont icon-time"/>{{ resource.uploadTime }}</span>
                    </div>
                    <div class="flex row space-between align-center " style="width: 400px">
                        <a :href="url" target="_blank" class="down-div flex center align-center">下载</a>
                        <span @click="commentFlag=!commentFlag" class="flex row center align-center icon-div">
                            <i class="iconfont icon-comment icon"></i>
                            评论
                        </span>
                        <span class="flex row center align-center icon-div">
                    <i class="iconfont icon-hurt icon"></i>
                    收藏
                </span>
                        <span class="flex row center align-center icon-div">
                    <i class="iconfont icon-report icon"></i>
                    举报
                </span>
                    </div>
                </div>
                <img style="width: 150px" :src="getUrl(resource.fileType)" alt="">
            </div>
            <el-divider/>
            <CommentList :flag="commentFlag" :id="resource.id" type="resource" />
        </div>
        <div class="flex column align-center" style="height: 300px;width: 15%;background: white;margin-left: 5px">
            <UserCard :user="owner"/>
            <FeiyuCalendar/>
        </div>
    </div>
</template>

<style lang="scss" scoped>
:deep(a){
    color: #304455;
}
.icon-div {
    cursor: pointer;
}

.icon-div:hover {
    .icon {
        color: #ff7e71;
    }
}

.icon {
    font-size: 13pt;
}

.down-div {
    cursor: pointer;
    border-radius: 15px;
    height: 35px;
    width: 100px;
    background: #ff7e71;
}

.down-div:hover {
    background: #ff6a5c;
}

.detailMain {
    margin:1rem 0;
    width: 100%;
    height: 100%;
    min-height: calc(100vh - 180px);
}

.detail-left {
    padding: 0 20px;
    width: 50%;
    background: #ffffff;
}
</style>
